<template>
  <div class="CharacterSet">
    <div class="title">权限管理-角色管理-新建角色</div>
    <el-scrollbar style="height: 100%;width: 100%;">
    <div class="contentBox">
      <div class="lcontent">
        <div class="role">
          <span>角色名称:</span>
          <el-input v-model="input" class="linp" size="mini"></el-input>
        </div>
        <div class="topRight">
          <button @click="doUpdate">更新</button>
          <button @click="doReset">重置</button>
          <button @click="doReturn">返回</button>
        </div>
        <div class="moduleList">
          <span>模块列表：</span>
          <div class="ltree">
            <el-tree
              :data="data4"
              show-checkbox
              node-key="id"
              ref="tree"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="defaultCheckedKeys"
              :props="defaultProps"
            ></el-tree>
          </div>
        </div>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'CharacterSet',
  data() {
    return {
      input: '',
      data3: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      roleId: '',
      data: '',
      key: '',
      defaultCheckedKeys: [],
      data1: [],
      data4: [
        {
          id: 1,
          label: '首页'
        },
        {
          id: 2,
          label: '内容管理',
          children: [
            {
              id: 10,
              label: '用户协议管理'
            },
            {
              id: 11,
              label: '广告管理'
            },
            {
              id: 12,
              label: '公共字段管理'
            },
            {
              id: 13,
              label: '页尾管理'
            }
          ]
        },
        {
          id: 3,
          label: '审核管理',
          children: [
            {
              id: 14,
              label: '人才信息审核'
            },
            {
              id: 15,
              label: '企业信息审核'
            }
          ]
        },
        {
          id: 4,
          label: '服务管理',
          children: [
            {
              id: 16,
              label: '企业发布职位'
            },
            {
              id: 17,
              label: '人才简历管理'
            },
            {
              id: 18,
              label: '企业申请沟通'
            },
            {
              id: 19,
              label: '人才确认入职'
            },
            {
              id: 20,
              label: '人才保证期'
            }
          ]
        },
        {
          id: 5,
          label: '财务管理',
          children: [
            {
              id: 21,
              label: '企业佣金'
            },
            {
              id: 22,
              label: '人才自荐奖金'
            }
          ]
        },
        {
          id: 6,
          label: '沟通',
          children: [
            {
              id: 23,
              label: '企业沟通'
            },
            {
              id: 24,
              label: '人才沟通'
            }
          ]
        },
        {
          id: 7,
          label: '权限管理',
          children: [
            {
              id: 25,
              label: '平台用户管理'
            },
            {
              id: 26,
              label: '角色管理'
            }
          ]
        },
        {
          id: 8,
          label: '数据库管理',
          children: [
            {
              id: 27,
              label: '人才管理'
            },
            {
              id: 28,
              label: '企业管理'
            },  {
              id: 29,
              label: '推荐职位'
            }
          ]
        },
        {
          id: 9,
          label: '个人中心',
          children: [
            {
              id: 30,
              label: '个人信息'
            },
            {
              id: 31,
              label: '修改密码'
            }
          ]
        }
      ]
    }
  },
  methods: {
    init() {
      this.input = this.$route.query.value
      this.key = this.$route.query.key
      if (this.key) {
        this.lAxios({
          method: 'post',
          url: '/power/getPowerByRoleId.do',
          params: {
            roleId: this.key
          }
        }).then(res => {
          let defaultCheckedKeys = []
          let resData = JSON.parse(res.data.data)
          resData.forEach(item => {
            if (item.id == '1') {
              if (item.status == '0') {
                defaultCheckedKeys.push(item.id)
              }
            }
            if (item.children && item.children.length > 0) {
              item.children.forEach(itemB => {
                if (itemB.status == '0' || itemB.status == 0) {
                  defaultCheckedKeys.push(itemB.id) //所有选择的子集
                }
              })
            }
          })
          console.log(defaultCheckedKeys)
          this.defaultCheckedKeys = defaultCheckedKeys
        })
      }
    },
    doUpdate() {
      let choseArr = this.$refs.tree.getCheckedKeys()
      let tempArr = choseArr
      if (choseArr.length > 0) {
        this.data4.forEach(itemA => {
          if (itemA.children && itemA.children.length > 0) {
            itemA.children.forEach(itemB => {
              choseArr.forEach(itemC => {
                if (itemC == itemB.id) {
                  tempArr.push(itemA.id)
                  tempArr.push(itemB.id)
                }
              })
            })
          }
        })
        tempArr = [...new Set(tempArr)]
      }
      let tempStr = tempArr.join(',')
      console.log(tempStr)
      let tempObj = {
        id: this.key,
        name: this.input
      }
      // console.log(tempObj);
      if (this.key) {
        this.lAxios({
          method: 'post',
          url: '/power/updatePower.do',
          params: {
            data: tempStr,
            role: tempObj
          }
        }).then(res => {
          if (res.data.status == 0) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.doReturn();
          }
        })
      } else if (this.key == undefined) {
        let tempObj1 = {
          id: 0,
          name: this.input
        }
        this.lAxios({
          method: 'post',
          url: '/power/updatePower.do',
          params: {
            data: tempStr,
            role: tempObj1
          }
        }).then(res => {
          if (res.data.status == 0) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.doReturn();
          }
        })
      }
    },
    doReset() {
      // console.log('重置')
      this.$refs.tree.setCheckedKeys([])
    },
    doReturn() {
      this.$router.push('/RoleManagement')
    }
  },
  activated() {
    this.init()
  }
}
</script>

<style scoped >
.CharacterSet {
  box-sizing: border-box;
  width: 100%;
  height: 90%;
  /*height: 345px;*/
  font-size: 12px;
  background-color: #f7f9fc;
  padding-left: 20px;
}
.title {
  height: 43px;
  line-height: 43px;
}
.top {
  height: 26px;
  line-height: 26px;
  /*border-top: 2px solid #797979;*/
  position: relative;
}
.top > span {
  padding-left: 10px;
}
.topRight {
  position: absolute;
  top: 30px;
  right: 10px;
}
.topRight > button {
  width: 80px;
  height: 30px;
  font-size: 14px;
  color: #3377ff;
  border-radius: 4px;
  margin-right: 10px;
}
.topRight > button:nth-child(1) {
  border: 1px solid rgba(247, 249, 252, 0.6);
  background: rgba(247, 249, 252, 0.8);
}
.topRight > button:nth-child(2) {
  border: 1px solid rgba(247, 249, 252, 0.6);
  background: rgba(247, 249, 252, 0.8);
}
.topRight > button:nth-child(3) {
  border: 1px solid rgba(247, 249, 252, 0.6);
  background-color: white;
  /*color: #333;*/
}
.lcontent {
  box-sizing: border-box;
  width: 100%;
  height: 748px;
  /*border: 1px solid #797979;*/
  background-color: white;
  position: relative;
}
.linp {
  width: 254px;
  margin-left: 20px;
}
.role {
  width: 88%;
  background-color: white;
  position: absolute;
  top: 35px;
  left: 70px;
}
.role > span {
  margin-right: 10px;
}
.moduleList {
  position: absolute;
  top: 80px;
  left: 70px;
  display: flex;
  flex-direction: row;
}
.ltree {
  margin-left: 10px;
}
.contentBox {
  overflow: hidden;
  width: 100%;
  height: 740px;
}
</style>
